This PR aims to simplify how utility class names are generated in Tailwind in order to make things much more consistent and predictable.

This is a breaking change and slated for v2.0.

Currently in Tailwind, several core plugins support a special default key in the config which tells Tailwind to generate a utility with no suffix:

module.exports = {
  theme: {
    boxShadow: {
      default: '0 0 5px black'
      // Generates `shadow`, not `shadow-default`
    }
  }
}

This is useful but confusing, because many other plugins don't support this, for example:

module.exports = {
  theme: {
    cursor: {
      default: 'default'
      // Generates `cursor-default`, not `cursor`
    }
  }
}

Similarly, many plugins support generating classes that are prefixed with - by adding - to the beginning of the key name:

module.exports = {
  theme: {
    margin: {
      '-5': '-5px'
      // Generates `-m-5`, not `m--5`
    }
  }
}

...but others don't:

module.exports = {
  theme: {
     backgroundPosition: {
      '-top-10': 'top -10px',
      // Generates `bg--top-10`, not `-bg-top-10`
    }
  }
}

This is confusing and makes the codebase complicated. The problem is, for some plugins we really do need to be able to include "default" in the utility name, like cursor-default.

So this PR replaces all usage of the lowercase default with the uppercase DEFAULT. The uppercase DEFAULT always means "with no suffix", and lowercase is just a regular string with no special meaning.

  module.exports = {
    theme: {
      boxShadow: {
-       default: '0 0 5px black'
+       DEFAULT: '0 0 5px black'
      }
    }
  }

This PR also makes things consistent so that DEFAULT can be used anywhere for any plugin, and so can the - prefix. This lets you make really stupid classes like -font-sans but that's your decision.

I've also updated the use of "default" in variants. We allow you to control the position of the default variant by adding "default" to your variants list:

// Old syntax
module.exports = {
  variants: {
     backgroundPosition: ['hover', 'default', 'focus']
  }
}

This has been replaced with DEFAULT as well, so that things are consistent.

// New syntax
module.exports = {
  variants: {
     backgroundPosition: ['hover', 'DEFAULT', 'focus']
  }
}

The last place this has been updated is when customizing the per-screen-size padding of the container:

module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  }
}

Updating for this change isn't too painful (just replace default with DEFAULT everywhere in your config where you want no suffix, and stuff like theme('borderRadius.default') with theme('borderRadius.DEFAULT') in your CSS) but is slightly annoying admittedly. I'm sorry.